import React, {Component} from 'react';
import Pubsub from 'pubsub-js'
import './index.css'


class Card extends Component {

    state={
        userList:[]
    }

    componentDidMount() {
        // 订阅消息
       const pub= Pubsub.subscribe("getData",(msg,data)=>{

           this.setState({
               userList:data
           })
       })
    }
    componentWillUnmount() {
        // 取消订阅
        PubSub.unsubscribe(pub);
    }

    render() {
        const {userList}=this.state
        return (
            <div className="row">
                {  userList.map((item)=>{
                  return   <div className="card" key={item.id}>
                      <a href={item.html_url} target="_blank"  rel="noreferrer">
                          <img src={item.avatar_url} style={{width: "100px"}} alt="avator"/>
                      </a>
                      <p className="card-text">{item.login}</p>
                  </div>
                })}
            </div>
        );
    }
}

export default Card;